import { MyHead } from "../../../components/head"
import { AddSquareOutline } from 'antd-mobile-icons'
import { useTiaoZhuan } from "../../../hooks/routers"
import { Tabs,SideBar, } from "antd-mobile"
import MyList from "../../../components/myList"
import {useState,useEffect} from 'react'
import { getAll } from "../../../api/AddMs"
import './index.scss'
import { useDispatch, useSelector } from "react-redux"
import { AppDispatch, RootReducer } from "../../../types/store"
import { changeLY, changeTypeLev } from "../../../rtk/reduers/data"

 const Conts = ()=>{
    const {Tz}  = useTiaoZhuan()
    const [msList,setmsList] = useState<addmsType[]>([])
    const activeKey = useSelector<RootReducer,string>(s=>s.MyData.isLuYin)
    const dispatch:AppDispatch = useDispatch()
    const typeKey = useSelector<RootReducer,string>(s=>s.MyData.typeLev)
    const onChange = (value:any)=>{
        dispatch(changeTypeLev(value))
    }
    const LevelTypes = [
        [
            { label: '简单', value: 1 },
            { label: '复杂', value: 2 },
            { label: '困难', value: 3 },
            { label: '地狱', value: 4 },
            { label: '无解', value: 5 },
        ]
    ]
    const getData = async()=>{
        let res =await getAll();
        setmsList([...res.result])
        
    }
    useEffect(()=>{
        getData()
    },[])

    return (
        <div>
            <MyHead title="信息" >
                <div onClick={()=>Tz('/addms')} style={{fontSize:14,color:"#2db7f5"}}>
                    <AddSquareOutline />
                    <span>添加面试</span>
                </div>
            </MyHead>
            <div className="find-box">
                <Tabs activeKey={activeKey} onChange={(v:string)=>dispatch(changeLY(v))}>
                    <Tabs.Tab title='带录音' key='has'>
                        <div className="scrollbox" style={{width:'100%',display:'flex'}}>
                            <SideBar activeKey={typeKey} onChange={onChange}  style={{width:70}} >
                                {
                                    LevelTypes[0].map((item:any,index:any) => (
                                        <SideBar.Item key={index} title={item.label}   />
                                    ))
                                }
                            </SideBar>
                            <div style={{padding:10,flex:1,height:'100%',overflow:'auto'}}>
                                 <MyList list={msList.filter((item:any)=>item.audioSrc!='')?.filter((v:any)=>v.level[0] == LevelTypes[0][Number(typeKey)].value ) } ></MyList>
                            </div>
                        </div>
                    </Tabs.Tab> 
                    <Tabs.Tab title='无录音' key='hasno'>
                        <div className="scrollbox" style={{width:'100%',display:'flex'}}>
                            <SideBar  style={{width:70}}  activeKey={typeKey} onChange={onChange}>
                                {
                                    LevelTypes[0].map((item:any,index:any) => (
                                        <SideBar.Item key={index} title={item.label}   />
                                    ))
                                }
                            </SideBar>
                            <div style={{padding:10,flex:1,height:'100%',overflow:'auto'}}>
                                <MyList  list={msList!.filter((item:any)=>item.audioSrc=='')?.filter((v:any)=>v.level[0] == LevelTypes[0][Number(typeKey)].value )  } ></MyList>
                            </div>
                        </div>
                    </Tabs.Tab>
                </Tabs>



            </div>
        </div>
    )
}

export default Conts